<!DOCTYPE html>
<html>
<head>
	<title>模拟抽奖</title>
	<meta charset="utf-8">
	<style type="text/css">
	*{margin: 0;padding:0;}
	.title{margin: 80px auto 10px;padding-top: 30px;font-size: 24px;font-weight: bold;weight:400px;height: 60px;color: #f00;text-align: center;}
	.btns{width:190px;height: 30px;margin: 0 auto;}
	span{float: left;margin-right: 10px;border: #ccc solid 1px;color: #fff;background: #036;font-family: "微软雅黑";font-size: 20px;width: 80px;height: 27;line-height: 27px;border-radius: 6px;text-align: center;display: block;cursor: pointer;}
	</style>
</head>
<body>
	<div id="title" class="title">开始抽奖啦！</div>
	<div class="btns">
		<span id="play">开 始</span>
		<span id="stop">结 束</span>
	</div>
</body>
<script type="text/javascript">
	//三个全局变量
	var data=['Phone6s','mac','house','beauty','car','book','money'],
		timer=null,
		flag=0;
	window.onload=function(){		
	var	play=document.getElementById('play'),
		stop=document.getElementById('stop'),
		title=document.getElementById('title');
	    //鼠标事件
		play.onclick=playFun;
		stop.onclick=stopFun;
		//键盘事件
		document.onkeyup=function(event) {
			event =event ||window.event;
			if (event.keyCode==13) {
				if (flag==0) {
					playFun();
					flag=1;
				}else{
					stopFun();
					flag=0;
				}
			}
		}
		function playFun(){
			clearInterval(timer);
			timer=setInterval(function(){
			var random=Math.floor(Math.random()*data.length);
			title.innerHTML=data[random];
			},50);
			play.style.background="#999";
		}
		function stopFun(){
			clearInterval(timer);
			play.style.background="#036";
		}
	}
</script>
</html>